<template>
    <section>
        <goback :getName='goName'></goback>
        <div class="purchasedGoodses">
            <div class="purchasedGoods_" v-for="(goods,index) of goodsList">
                <div class="purchasedGoods" @click="turnPage(goods.productId)">
                    <div class="goodsThumbnail">
                        <img :src="goods.thumbnail" alt="">
                    </div>
                    <div class="goodsInfo">
                        <div class="goodsInfo-name">
                            <a>{{goods.productName}}</a>
                        </div>
                        <span class="goodsInfo-num">
                            数量：
                            <a>{{goods.num}}</a>
                            &nbsp;&nbsp;&nbsp;
                        </span>
                        <span class="goodsInfo-skuName">
                            规格：
                            <a>{{goods.skuName}}</a>
                        </span>
                        <div class="goodsInfo-express">
                            <a>{{goods.courierCompany}}</a>
                            {{goods.courierNumber?'：':'暂无物流信息'}}
                            <a>{{goods.courierNumber}}</a>
                        </div>
                        <div class="lastInfo">
                            <span class="goodsInfo-price">
                                <a>￥{{(goods.price/100).toFixed(2)}}</a>
                            </span>
                            <span class="goodsInfo-state">
                                {{goods.state===1?'未发货':''}}
                                {{goods.state===2?'已发货':''}}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import goback from '../../components/goback'
    import { getGoodsInfoByCode } from '../../libs/interface'
    export default {
        components: { goback, getGoodsInfoByCode },
        data() {
            return {
                goName: '订单详情',
                goodsList: [],
            }
        },
        mounted () {
            let vm = this
            let param = {
                orderCode: vm.$route.params.id,
            }
            getGoodsInfoByCode(param, (data) => {
                if (data.code === 1) {
                    vm.goodsList = data.payload
                } else {
                    vm.$toast('系统异常')
                }
            })
        },
        methods: {
            turnPage (id) {
                // sessionStorage.setItem('coupon', JSON.stringify({ coupon: false, isFund: false }))
                sessionStorage.removeItem('coupon')
                this.$router.push('/goods/' + id)
            }
        }
    }
</script>
<style scoped>
.purchasedGoods_ {
    width: 100%;
    height: 6rem;
    border-top: 1px solid #F6F6F6;
    background-color: #fff;
    position: relative;
    color: #000;
}
.purchasedGoods {
    width: 100%;
    height: 5rem;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.goodsThumbnail {
    width: 7rem;
    height: 5rem;
    border-radius: .6rem;
    overflow: hidden;
    margin-left: 3%;
}
.goodsThumbnail img {
    display: inline-block;
    width: 100%;
    height: 100%;
}
.goodsInfo {
    width: 59%;
    margin: 0 2% 0 3%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.goodsInfo-name {
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.goodsInfo-num, .goodsInfo-skuName, .goodsInfo-express {
    font-size: .7rem;
}
.lastInfo {
    display: flex;
    justify-content: space-between;
    margin-top: 2%;
}
.goodsInfo-price {
    font-size: .95rem;
}
.goodsInfo-state {
    color: #E93B3D;
}
</style>